<template>
  <div class="page">

    <div class="block" >
      <div class="tien-bar bg-white">
        <div class='action'>
          <span class='icon-title text-orange'></span> 默认效果
        </div>
      </div>
      <div class="padding-sm">
        <div class='flex flex-wrap justify-around'>
          <button v-for="(item,index) in list" :class=" 'animation-'+(animation==item.name? item.name :'') + 'bg-'+item.color " class='tien-btn margin-sm basis-sm shadow' bindtap='toggle' :data-class="item.name" >{{item.name}}</button>
        </div>
      </div>
      <div class="tien-bar bg-white">
        <div class='action'>
          <span class='icon-title text-orange'></span> 反向动画
        </div>
      </div>

      <div class="padding-sm">
        <div class='flex flex-wrap justify-around'>
          <button v-for="(item,index) in list" :class=" 'animation-'+(animation==item.name? item.name+'s' :'') + 'bg-'+item.color " class='tien-btn margin-sm basis-sm shadow' bindtap='toggle' :data-class="item.name+'s'" >{{item.name}}</button>

        </div>
      </div>
      <div class="tien-bar bg-white">
        <div class='action'>
          <span class='icon-title text-orange'></span> 延迟执行
        </div>
        <div class='action'>
          <button class='tien-btn bg-cyan shadow' bindtap='toggleDelay'>开始执行</button>
        </div>
      </div>

      <div class="padding-sm">
        <div class='flex flex-wrap justify-around'>
          <button v-for="(item,index) in list" :class="'bg-'+item.color + toggleDelay?'animation-slide-bottom':'' " class='  tien-btn margin-sm basis-sm shadow' "style=" 'animation-delay:'+ (index)*0.1 +'s;'' " >0.{{index}}s</button>
        </div>
      </div>
      <div class="tien-bar bg-white">
        <div class='action'>
          <span class='icon-title text-orange'></span> Gif动画
        </div>
      </div>
      <div class="margin radius bg-gradual-green shadow-blur">
        <img src='https://image.weilanwl.com/gif/wave.gif' mode='scaleToFill' class='gif-black response' style='height:50px'>
      </div>
      <div class="margin flex">
        <div class='bg-black flex-sub margin-right radius shadow-lg'>
          <img src='https://image.weilanwl.com/gif/loading-black.gif' mode='aspectFit' class='gif-black response' style='height:120px'>
        </div>
        <div class='bg-white flex-sub radius shadow-lg'>
          <img src='https://image.weilanwl.com/gif/loading-white.gif' mode='aspectFit' class='gif-white response' style='height:120px'>
        </div>
      </div>
      <div class="margin flex">
        <div class='bg-gradual-blue flex-sub margin-right radius shadow-lg'>
          <img src='https://image.weilanwl.com/gif/rhomb-black.gif' mode='aspectFit' class='gif-black response' style='height:120px'>
        </div>
        <div class='bg-white flex-sub radius shadow-lg'>
          <img src='https://image.weilanwl.com/gif/rhomb-white.gif' mode='aspectFit' class='gif-white response' style='height:120px'>
        </div>
      </div>
      <div class="margin flex">
        <div class='bg-white flex-sub margin-right radius shadow-lg'>
          <img src='https://image.weilanwl.com/gif/loading-1.gif' mode='aspectFit' class='gif-white response' style='height:120px'>
        </div>
        <div class='bg-black flex-sub radius shadow-lg'>
          <img src='https://image.weilanwl.com/gif/loading-2.gif' mode='aspectFit' class='gif-black response' style='height:120px'>
        </div>
      </div>



      
    </div>






  </div>
</template>

<script>
export default {
  name:'icon',
  data() {
    return {
      list: [{
        name: 'fade',
        color: 'red'
      },
      {
        name: 'scale-up',
        color: 'orange'
      },
      {
        name: 'scale-down',
        color: 'olive'
      },
      {
        name: 'slide-top',
        color: 'green'
      }, {
        name: 'slide-bottom',
        color: 'cyan'
      },
      {
        name: 'slide-left',
        color: 'blue'
      },
      {
        name: 'slide-right',
        color: 'purple'
      },
      {
        name: 'shake',
        color: 'mauve'
      }
    ],
    toggleDelay: false
    };
  },
  mounted() {
    
  },
  methods: {
    
    
  },
};
</script>

<style>
image[class*="gif-"]{
  border-radius: 6rpx;
  display: block;
}

.gif-black{  
  mix-blend-mode: screen;  
}
.gif-white{  
  mix-blend-mode: multiply; 
}


[class*=animation-] {
    animation-duration: .5s;
    animation-timing-function: ease-out;
    animation-fill-mode: both
}

.animation-fade {
    animation-name: fade;
    animation-duration: .8s;
    animation-timing-function: linear
}

.animation-scale-up {
    animation-name: scale-up
}

.animation-scale-down {
    animation-name: scale-down
}

.animation-slide-top {
    animation-name: slide-top
}

.animation-slide-bottom {
    animation-name: slide-bottom
}

.animation-slide-left {
    animation-name: slide-left
}

.animation-slide-right {
    animation-name: slide-right
}

.animation-shake {
    animation-name: shake
}

.animation-reverse {
    animation-direction: reverse
}

@keyframes fade {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes scale-up {
    0% {
        opacity: 0;
        transform: scale(.2)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes scale-down {
    0% {
        opacity: 0;
        transform: scale(1.8)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes slide-top {
    0% {
        opacity: 0;
        transform: translateY(-100%)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slide-bottom {
    0% {
        opacity: 0;
        transform: translateY(100%)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0)
    }

    10% {
        transform: translateX(-9px)
    }

    20% {
        transform: translateX(8px)
    }

    30% {
        transform: translateX(-7px)
    }

    40% {
        transform: translateX(6px)
    }

    50% {
        transform: translateX(-5px)
    }

    60% {
        transform: translateX(4px)
    }

    70% {
        transform: translateX(-3px)
    }

    80% {
        transform: translateX(2px)
    }

    90% {
        transform: translateX(-1px)
    }
}

@keyframes slide-left {
    0% {
        opacity: 0;
        transform: translateX(-100%)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes slide-right {
    0% {
        opacity: 0;
        transform: translateX(100%)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}  
</style>